/*
 * @Description: 更多商品卡片
 * @Author: kanglin
 * @Date: 2018-12-05 14:09:16
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
     @import '~src/assets/css/common.less';
    .v-com-more-product-card{
        width:360*@rem-per-px;
        height:500*@rem-per-px;
		background: #fff;
        .thumb{
            width: 100%;
            height: 360*@rem-per-px;
            &>img{
                width: 100%;
            }
        }
        .title{
            margin: 16*@rem-per-px 16*@rem-per-px 0;
            height: 72*@rem-per-px;
            font-size:24*@rem-per-px;
            line-height:36*@rem-per-px;
            overflow: hidden;
             display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
        }
        .currency{
            margin: 0 16*@rem-per-px;
            .symbol{
                color: @unit-color;
            }
            .price{
                height:48*@rem-per-px;
                font-size:32*@rem-per-px;
                font-weight:bold;
                line-height:48*@rem-per-px;
            }
        }

    }
 </style>

<template>
	<div class="v-com-more-product-card">
		<div class="thumb">
			<img
				v-lazy="src"
				alt="">
		</div>
		<div class="title">{{ title }}</div>
		<p class="currency">
			<small
				v-if="leftSymbol"
				class="symbol">{{ leftSymbol }}</small>
			<span class="price">{{ price }}</span>
			<small
				v-if="rightSymbol"
				class="symbol">{{ rightSymbol }}</small>
		</p>
	</div>
</template>

<script>
/**
 * 更多商品卡片
 * @vue-prop {string} [src=null]	封面图片
 * @vue-prop {String} [title='']	商品标题
 * @vue-prop {string} [leftSymbol=''] 货币符号
 * @vue-prop {string} [rightSymbol='] 货币符号
 * @vue-prop {string} [price='0.00'] 商品价格
 */
export default {
	name: 'MoreProductCard',
	props: {
		src: {
			type: String,
			default() {
				return null;
			},
		},
		title: {
			type: String,
			default() {
				return '';
			},
		},
		leftSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		rightSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		price: {
			type: String,
			default() {
				return '0.00';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {},
};
</script>
